<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
	<!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
	<ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="$store.state.setting.isScale">
		<div class="bg">
			<dv-loading v-if="loading">Loading...</dv-loading>
			<div v-else class="host-body">
				<!-- 内容  s-->
				<router-view></router-view>
				<!-- 内容 e -->
			</div>
		</div>
		<Setting ref="setting" />
	</ScaleScreen>
	<!-- </div> -->
</template>

<script>
	import { formatTime
	} from "../utils/index.js";
	import Setting from "./setting.vue";
	import ScaleScreen from "@/components/scale-screen/scale-screen.vue";
	export default {
		components: {
			Setting,
			ScaleScreen
		},
		data() {
			return {
				title: '大豆数字化综合管理平台',
				timing: null,
				loading: true,
				dateDay: null,
				dateYear: null,
				dateWeek: null,
				weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
				curIndex: 0,
				navs: [{
						id: 1,
						title: '总览',
						url: '/index'
					},
					{
						id: 2,
						title: '实验地分布',
						url: '/plot'
					},
					{
						id: 3,
						title: '品种选育',
						url: '/vari'
					},
					{
						id: 4,
						title: '栽培技术',
						url: '/plant'
					},
					{
						id: 5,
						title: '病虫害知识',
						url: '/diseasePest'
					},
				]
			};
		},
		filters: {
			numsFilter(msg) {
				return msg || 0;
			},
		},
		computed: {},
		created() {},
		mounted() {
			this.timeFn();
			this.cancelLoading();
		},
		beforeDestroy() {
			clearInterval(this.timing);
		},
		methods: {
			navClick(index, url) {
				this.curIndex = index;
				if (this.curIndex != 0) {
					this.title = '大豆种植管理平台';
				} else {
					this.title = '大豆数字化综合管理平台';
				}
				// this.$router.push(url);
			},
			showSetting() {
				this.$refs.setting.init();
			},
			timeFn() {
				this.timing = setInterval(() => {
					this.dateDay = formatTime(new Date(), "HH: mm: ss");
					this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
					this.dateWeek = this.weekday[new Date().getDay()];
				}, 1000);
			},
			cancelLoading() {
				let timer = setTimeout(() => {
					this.loading = false;
					clearTimeout(timer);
				}, 500);
			},
		},
	};
</script>

<style lang="scss">
	@import "./home.scss";
</style>
